<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="queryParams.orderNo" clearable style="width: 200px;" placeholder="请输入订单编号"/>
      <el-date-picker v-model="selectDate" value-format="yyyy-MM-dd" format="yyyy年MM月dd日" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange"/>
      <el-button v-permission="['refund:list']" type="primary" icon="el-icon-search" @click="search">查找</el-button>
    </div>
    <el-tabs v-model="currentTab" @tab-click="tabChange">
      <el-tab-pane v-for="tab in tabs" :label="tab.title" :key="tab.status" :name="'tab-'+tab.status"/>
    </el-tabs>
    <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中..." border fit highlight-current-row>
      <el-table-column align="center" label="退款单号" prop="refundNo" width="250" fixed/>
      <el-table-column align="center" label="订单号" prop="orderNo" width="250" fixed>
        <template slot-scope="scope">
          <el-link :href="'#/business/order/detail?orderNo='+scope.row.orderNo" type="primary">{{ scope.row.orderNo }}</el-link>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单金额" width="100">
        <template slot-scope="scope">
          {{ scope.row.orderPrice }}元
        </template>
      </el-table-column>
      <el-table-column align="center" label="退款金额" width="100">
        <template slot-scope="scope">
          {{ scope.row.refundPrice }}元 <br> {{ scope.row.payTypeName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="退款进度" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.progressStatusName" :type="getStatusClassName(scope.row.progressStatus)">{{ scope.row.progressStatusName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="申请人" width="150">
        <template slot-scope="scope">
          {{ scope.row.opName }}【{{ scope.row.opTypeName }}】
        </template>
      </el-table-column>
      <el-table-column align="center" label="申请时间" prop="createDate" width="150"/>
      <el-table-column align="center" label="申请状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="getStatusClassName(scope.row.status)">{{ scope.row.statusName }}</el-tag>
          <el-tag v-if="scope.row.expressStatus===204" type="warning" class="margin-top-10">{{ scope.row.expressStatusName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="申请原因" prop="applyReason"/>
      <el-table-column align="center" label="备注" prop="remark"/>
      <el-table-column align="center" label="操作" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button v-permission="['refund:agree']" v-if="scope.row.status===1000" type="danger" size="mini" @click="agree(scope.row)">同意退款</el-button>
          <el-button v-permission="['refund:reject']" v-if="scope.row.status===1000" type="danger" size="mini" @click="toReject(scope.row)">退款驳回</el-button>
          <el-button v-permission="['refund:doRefund']" v-if="scope.row.status===1001 && scope.row.progressStatus===1000 && scope.row.canRefund" type="primary" size="mini" @click="toRefund(scope.row)">退款</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-permission="['refund:list']" v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="initList"/>

    <el-dialog :close-on-click-modal="false" :visible.sync="rejectDialogVisible" title="驳回退款申请" @close="closeReject">
      <el-form ref="rejectForm" :model="rejectForm" :rules="rejectRules" status-icon label-position="left" label-width="100px">
        <el-form-item label="订单号">
          <span>{{ order.orderNo }}</span>
        </el-form-item>
        <el-form-item label="订单状态">
          <span>{{ order.orderStatusName }}</span>
        </el-form-item>
        <el-form-item label="退款状态">
          <span>{{ order.payStatusName }}</span>
        </el-form-item>
        <el-form-item label="物流状态">
          <span>{{ order.expressStatusName }}</span>
        </el-form-item>
        <el-form-item label="订单金额">
          <span>{{ order.orderPrice }}</span>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="rejectForm.remark" type="textarea" rows="5" placeholder="请输入驳回申请的备注信息"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeReject">取消</el-button>
        <el-button type="primary" @click="reject">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" :visible.sync="refundDialogVisible" title="退款" @close="closeRefund">
      <el-form ref="refundForm" :model="refundForm" :rules="refundRules" status-icon label-position="left" label-width="100px">
        <el-form-item label="订单号">
          <span>{{ order.orderNo }}</span>
        </el-form-item>
        <el-form-item label="订单状态">
          <span>{{ order.orderStatusName }}</span>
        </el-form-item>
        <el-form-item label="退款状态">
          <span>{{ order.payStatusName }}</span>
        </el-form-item>
        <el-form-item label="物流状态">
          <span>{{ order.expressStatusName }}</span>
        </el-form-item>
        <el-form-item label="订单金额">
          <span>{{ order.orderPrice }}</span>
        </el-form-item>
        <el-form-item label="退款金额" prop="amount">
          <el-input v-model="refundForm.amount"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="refundForm.remark" type="textarea" rows="5" placeholder="请输入退款备注信息"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeRefund">取消</el-button>
        <el-button :loading="listLoading" type="primary" @click="refund">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { RefundOrderService } from '@/api/OrderService'
import Pagination from '@/components/Pagination'
import Notify from '@/utils/notify'

export default {
  name: 'OrderRefund',
  components: { Pagination },
  data() {
    const validateAmount = (rule, value, callback) => {
      const reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g
      if (!value) {
        callback(new Error('请输入退款金额'))
      } else if (!reg.test(value)) {
        callback(new Error('退款金额必须是数字'))
      } else if (value > this.order.orderPrice) {
        callback(new Error('退款金额不能大于订单支付金额'))
      } else {
        callback()
      }
    }
    return {
      tabs: [{ title: '全部', status: undefined }, { title: '待审核', status: 1000 }, { title: '同意退款', status: 1001 }, { title: '退款驳回', status: 1002 }],
      currentTab: 'tab-0', selectDate: ['', ''], order: { orderStatusName: undefined, payStatusName: undefined, expressStatusName: undefined, orderPrice: undefined },
      queryParams: { pageNo: 1, pageSize: 20, orderNo: undefined, status: undefined, beginTime: undefined, endTime: undefined },
      list: undefined, total: 0, listLoading: false,
      rejectDialogVisible: false, rejectForm: { refundNo: undefined, remark: undefined }, rejectRules: { remark: [{ required: true, message: '请填写驳回备注信息', trigger: 'blur' }] },
      refundDialogVisible: false, refundForm: { refundNo: undefined, amount: 0, remark: undefined }, refundRules: { amount: [{ required: true, validator: validateAmount, trigger: 'blur' }] }
    }
  },
  created() {
    this.initList()
  },
  methods: {
    dateChange() {
      if (this.selectDate) {
        this.queryParams.beginTime = this.selectDate[0]
        this.queryParams.endTime = this.selectDate[1]
      } else {
        this.queryParams.beginTime = undefined
        this.queryParams.endTime = undefined
      }
    },
    tabChange(tab) {
      this.queryParams.status = this.tabs[tab.index].status
      this.search()
    },
    initList() {
      this.listLoading = true
      RefundOrderService.listOrderRefund(this.queryParams).then(response => {
        this.list = response.data
        this.total = response.totalCount
        this.listLoading = false
      })
    },
    search() {
      this.queryParams.pageNo = 1
      this.initList()
    },
    agree(row) {
      this.$confirm('您确认同意该条退款申请吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        RefundOrderService.agreeOrderRefund(row.refundNo).then(() => {
          Notify.success(this, '操作成功!')
          this.initList()
          if (row.expressStatus === 204) {
            this.$alert('商家确认收货后可进行退款操作!', '退款提示', { confirmButtonText: '确定' })
          }
        })
      }).catch(() => {
        return false
      })
    },
    toReject(row) {
      this.rejectDialogVisible = true
      this.order = row
      this.rejectForm.refundNo = row.refundNo
    },
    closeReject() {
      this.rejectDialogVisible = false
      this.rejectForm.refundNo = undefined
      this.rejectForm.remark = undefined
    },
    reject() {
      this.$refs['rejectForm'].validate(valid => {
        if (valid) {
          RefundOrderService.rejectOrderRefund(this.rejectForm).then(() => {
            Notify.success(this, '操作成功!')
            this.initList()
            this.closeReject()
          })
        }
      })
    },
    toRefund(row) {
      this.refundDialogVisible = true
      this.order = row
      this.refundForm.refundNo = row.refundNo
      this.refundForm.amount = this.order.orderPrice
    },
    closeRefund() {
      this.refundDialogVisible = false
      this.refundForm.refundNo = undefined
      this.refundForm.remark = undefined
      this.refundForm.amount = 0
      this.listLoading = false
    },
    refund() {
      this.listLoading = true
      this.$refs['refundForm'].validate(valid => {
        if (valid) {
          RefundOrderService.refundOrder(this.refundForm).then(() => {
            Notify.success(this, '正在处理退款中!')
            this.initList()
            this.closeRefund()
          })
        }
      })
    },
    getStatusClassName(progressStatus) {
      switch (parseInt(progressStatus, 0)) {
        case 1000:
          return 'warning'
        case 1001:
          return 'warning'
        case 1002:
          return 'success'
        case 1003:
          return 'danger'
        default:
          return ''
      }
    }
  }
}
</script>
